<template>
  <div class="tea-details max-h-screen w-100% overflow-y-scroll">
    <image
      :src="`${cdnUrl}/imgs/teaDetailsPng/bg.png${imgVersion}`"
      class="pointer-events-none h-460rpx w-100%"
      mode="widthFix"
    />
    <div class="content pl-32rpx pr-32rpx pt-44rpx">
      <div class="title mb-32rpx rounded-32rpx">
        <div class="mb-32rpx flex items-center">
          <span class="text-32rpx font-600">标题</span>
          <image
            :src="`${cdnUrl}/svgicons/teaDetails/leaf.svg${imgVersion}`"
            mode="scaleToFill"
            class="h-48rpx w-48rpx"
          />
        </div>
        <div class="tag">
          <div v-for="(item, index) in tagList" class="mb-34rpx flex items-center">
            <span class="mr-56rpx text-24rpx text-hex-333">{{ item.title }}</span>
            <div v-for="(tag, i) in item.tags" :class="item.val===tag?'text-hex-ABCD03 border-2rpx border-hex-ABCD03 border-solid':'text-hex-999'" class="mr-24rpx h-44rpx rounded-8rpx bg-hex-f5f5f5 px-24rpx text-24rpx leading-44rpx" @click="item.val=tag">{{ tag }}</div>
          </div>
        </div>
      </div>
      <div class="mb-32rpx flex items-center">
        <span class="text-32rpx font-600">标题</span>
        <image
          :src="`${cdnUrl}/svgicons/teaDetails/leaf.svg${imgVersion}`"
          mode="scaleToFill"
          class="h-48rpx w-48rpx"
        />
      </div>
      <!-- 套餐 -->
      <div v-for="item in 2" class="title mb-32rpx box-border rounded-32rpx bg-hex-ffffff p-32rpx">
        <div class="mb-32rpx text-28rpx font-bold text-hex-333333">选择饮品({{ moreselectList.length }}选1)</div>
        <!-- 二选一轮播 -->
        <scroll-view
          class="scrolldemo w-100% overflow-x-hidden whitespace-nowrap" :show-scrollbar="true" :scroll-x="true" @scroll="scroll">
          <div
            v-for="(item, index) in moreselectList"
            :key="index"
            :class="{ activeClass: item.id === goodsIndex }"
            class="mb-32rpx mr-32rpx box-border inline-block h-286rpx w-256rpx rounded-26rpx bg-hex-F5F5F5 pt-32rpx"
            @click="changeGoodsIndex(item.id)">
            <div class="relative min-h-152rpx flex justify-center">
              <image
                :src="item.imgUrl"
                mode="scaleToFill"
                class="z-9 h-152rpx w-104rpx"
              />
              <div class="absolute bottom-0 h-126rpx w-126rpx rounded-50% bg-hex-CFEDE6" />
            </div>
            <div class="mt-8rpx box-border pl-16rpx text-28rpx font-bold text-hex-333333">
              <div class="mb-4rpx">{{ item.name }}</div>
              <div class="font-numberFont">¥{{ item.price }}</div>
            </div>
          </div>
        </scroll-view>
        <div class="tag">
          <div v-for="(item, index) in tagList" class="mb-34rpx flex items-center">
            <span class="mr-56rpx text-24rpx text-hex-333">{{ item.title }}</span>
            <div v-for="(tag, i) in item.tags" :class="item.val===tag?'text-hex-ABCD03 border-2rpx border-hex-ABCD03 border-solid':'text-hex-999'" class="mr-24rpx h-44rpx rounded-8rpx bg-hex-f5f5f5 px-24rpx text-24rpx leading-44rpx" @click="item.val=tag">{{ tag }}</div>
          </div>
        </div>
      </div>

      <div class="relative mt-52rpx">
        <div class="hot relative box-border rounded-20rpx bg-hex-fff p-24rpx">
          <span class="title text-28rpx">
            <image
              :src="`${cdnUrl}/svgicons/search/emoji.svg${imgVersion}`"
              mode="scaleToFill"
              class="h-28rpx w-28rpx"
            />
            <span class="z-99">夏日推荐榜</span>
          </span>
          <div v-for="item in items" class="hot-item z-999 mt-36rpx h-180rpx flex pr-25rpx">
            <div class="relative h-180rpx w-180rpx flex items-center justify-center rounded-26rpx bg-hex-F5F3F0">
              <image
                :src="`${cdnUrl}/imgs/square/test1.png${imgVersion}`"
                mode="scaleToFill"
                class="h-138rpx w-95rpx"
              />
            </div>
            <div class="relative ml-20rpx h-100% flex-1">
              <div>
                <div class="text-28rpx font-600 leading-38rpx">{{ item.name }}</div>
                <div class="mt-16rpx flex items-center text-24rpx text-hex-7C8699">
                  <div
                    v-for="itm in item.tagList"
                    class="tagClass relative mr-20rpx">{{ itm }}</div>
                  <!-- <div class="mx-10rpx h-14rpx w-2rpx rounded-22rpx bg-hex-7C8699" />
                  <div>养生饮</div>
                  <div class="mx-10rpx h-14rpx w-2rpx rounded-22rpx bg-hex-7C8699" />
                  <div>可去冰</div> -->
                </div>
              </div>
              <div class="absolute bottom-0 w-100%">
                <div class="flex items-center">
                  <div class="flex-1 text-28rpx text-hex-333">￥{{ item.price }}</div>
                  <image
                    :src="`${cdnUrl}/svgicons/userComment/add.svg${imgVersion}`"
                    mode="scaleToFill"
                    class="mt-5rpx h-50rpx w-50rpx"
                  />
                </div>
              </div>
            </div>
          </div>
          <div class="bgblur absolute bottom-0 left-0 right-0 h-100rpx w-100% flex items-center justify-center rounded-b-24rpx bg-[rgba(255,255,255,0.67)]">
            <image
              :src="`${cdnUrl}/imgs/tea/downMore.png${imgVersion}`"
              mode="scaleToFill"
              class="h-32rpx w-32rpx"
            />
            <span class="text-24rpx text-hex-7C8699">展开全部</span>
          </div>
        </div>
      </div>
      <div
        class="mt-32rpx h-98rpx flex items-center justify-between rounded-12rpx bg-hex-fff px-32rpx leading-98rpx"
        @click="navTo('/pages-tea/userComment')">
        <span class="text-24rpx text-hex-262626">用户评价(0)</span>
        <image
          :src="`${cdnUrl}/imgs/tea/more.png${imgVersion}`"
          mode="scaleToFill"
          class="h-30rpx w-30rpx"
        />
      </div>
      <div class="mt-32rpx box-border rounded-24rpx bg-hex-fff px-32rpx">
        <text class="font-28rpx my-32rpx inline-block text-24rpx font-600 text-hex-000">商品详情</text>
        <div class="mb-32rpx">
          <image
            :src="`${cdnUrl}/imgs/teaDetailsPng/bg.png${imgVersion}`"
            class="w-100% rounded-24rpx"
            mode="widthFix"
          />
        </div>
      </div>
      <div class="h-220rpx" />
    </div>
    <div class="absolute top-0 w-100%" :style="{ paddingTop: `${topHight}px` }">
      <!-- <uni-nav-bar left-icon="left" :border="false" background-color="transparent" @clickLeft="goback" /> -->
      <image
        :src="`${cdnUrl}/svgicons/tea/cancel.svg${imgVersion}`"
        mode="scaleToFill"
        class="h-70rpx w-70rpx"
      />
      <!-- 收藏按钮 -->
      <div class="absolute right-62rpx top-420rpx">
        <div class="h-92rpx w-92rpx flex justify-center justify-items-center border-2rpx border-hex-fff rounded-100% border-solid bg-hex-f5f5f5">
          <image
            :src="`${cdnUrl}/svgicons/teaDetails/collect_nor.svg${imgVersion}`"
            mode="scaleToFill"
            class="relative top-25rpx h-40rpx w-40rpx"
          />
        </div>
        <div class="mt-16rpx text-24rpx text-hex-7c8699">收藏口味</div>
      </div>
    </div>
    <div class="fixed bottom-0 left-0 right-0 z-99 box-border rounded-t-32rpx bg-hex-fff p-32rpx">
      <div class="mb-16rpx flex items-center justify-between">
        <div>
          <div class="mb-10rpx">
            <text class="font-numberFont mr-10rpx text-28rpx text-hex-E36043">￥24.8</text>
            <text class="text-24rpx text-hex-999" style="text-decoration: line-through;">￥34.8</text>
          </div>
          <div class="text-24rpx text-hex-7C8699">帘卷西风</div>
        </div>
        <div class="flex items-center">
          <image
            :src="`${cdnUrl}/svgicons/userComment/down.svg${imgVersion}`"
            mode="scaleToFill"
            class="mt-5rpx h-50rpx w-50rpx"
            @click="reduceShop"
          />
          <div class="ml-24rpx mr-24rpx">{{ shopnum }}</div>
          <image
            :src="`${cdnUrl}/svgicons/userComment/add.svg${imgVersion}`"
            mode="scaleToFill"
            class="mt-5rpx h-50rpx w-50rpx"
            @click="addShop"
          />
        </div>
      </div>
      <div class="flex justify-between text-28rpx">
        <div class="h-72rpx w-328rpx border-2rpx border-hex-ABCD03 rounded-46rpx border-solid text-center leading-72rpx text-hex-ABCD03" @click="navTo('/pages-tea/comfirmOrder')">立即购买</div>
        <div class="h-72rpx w-328rpx rounded-46rpx bg-hex-ABCD03 text-center leading-72rpx text-hex-fff">加入购物车</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
let topHight = $ref(0)
const scroll = (e) => {

}

let moreselectList: any = $ref([
  { id: 1, imgUrl: `${cdnUrl}/imgs/square/test1.png${imgVersion}`, name: '帘卷西风1', price: '23' },
  { id: 2, imgUrl: `${cdnUrl}/imgs/square/test1.png${imgVersion}`, name: '帘卷西风2', price: '15' },
  { id: 3, imgUrl: `${cdnUrl}/imgs/square/test1.png${imgVersion}`, name: '帘卷西风3', price: '26' },
  { id: 4, imgUrl: `${cdnUrl}/imgs/square/test1.png${imgVersion}`, name: '帘卷西风4', price: '29' },
  { id: 5, imgUrl: `${cdnUrl}/imgs/square/test1.png${imgVersion}`, name: '帘卷西风5', price: '18' },
  { id: 6, imgUrl: `${cdnUrl}/imgs/square/test1.png${imgVersion}`, name: '帘卷西风6', price: '23' },
])
let goodsIndex: any = $ref(1)
const changeGoodsIndex = (index) => {
  goodsIndex = index
}
let items: any = $ref([{
  id: 1,
  imageUrl: `${cdnUrl}/imgs/square/test1.png${imgVersion}`,
  price: 15,
  name: '茶一',
  tagList: ['草本植物', '养生饮料', '可去冰'],
}, {
  id: 2,
  imageUrl: `${cdnUrl}/imgs/square/test1.png${imgVersion}`,
  price: 15,
  name: '茶二',
  tagList: ['草本植物', '养生饮料', '可去冰'],
}, {
  id: 3,
  imageUrl: `${cdnUrl}/imgs/square/test1.png${imgVersion}`,
  price: 15,
  name: '茶二',
  tagList: ['草本植物', '养生饮料', '可去冰'],
}])
let tagList = $ref([
  {
    title: '杯型',
    tags: ['中杯', '大杯'],
    val: '中杯',
  },
  {
    title: '温度',
    tags: ['去冰', '少冰'],
    val: '去冰',
  },
  {
    title: '糖度',
    tags: ['半糖', '少糖', '全糖'],
    val: '半糖',
  },
])
//商品数量
let shopnum = $ref(1)
//商品减
const reduceShop = () => {
  if (shopnum > 1) {
    shopnum = shopnum - 1
  }
}
//商品添加
const addShop = () => {
  shopnum = shopnum + 1
}

onMounted(() => {
  // #ifdef MP-WEIXIN
  const { capsuleTop } = useCapsulePosition()
  topHight = capsuleTop.value
  // #endif
})

//返回上一级
const goback = () => {
  uni.navigateBack({
    delta: 1,
  })
}
</script>

<style lang="scss">
.tea-details{
  background: linear-gradient(180deg, #FFF 0%, #f5f5f5 100%);

  .activeClass{
    background-color: #EDFDF8;
    border: 1rpx solid #ABCD03 ;
  }

  .hot{
    background-image: url('https://qqy-1254346585.cos.ap-nanjing.myqcloud.com/qqy/svgicons/search/searchbg.svg');
    background-size: 100%;
    background-repeat: no-repeat;
  }

  .bgblur{
    backdrop-filter: blur(8rpx);
  }

  // ::v-deep .uni-icons{
  //   color: #18a786 !important;
  // }

  .font-numberFont{
    font-family:'DingTalk JinBuTi';
  }

  .scroll-view-item {
    height: 300rpx;
  }

  .scrolldemo{
    scrollbar-width: none; /* firefox */
    -ms-overflow-style: none; /* IE 10+ */
    overflow-x: hidden;
  }

  .scrolldemo::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }

  .tagClass::after{
    position: absolute;
    content: '';
    height:14rpx;
    width:2rpx;
    top: 10rpx;
    right: -10rpx;
    background-color: #7c8699;
  }

  .tagClass:last-child::after{
    width: 0rpx;
    height:0rpx;
  }
}

</style>
